<template>
  <div class="home">
    <NavBar
      class="navbar"
      title="视频列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    </NavBar>
    <div class="tagName">
      <h4>分类</h4>
      <van-tabbar v-model="tagName" :fixed="false">
        <van-tabbar-item name="action" @click="getList('action')">动作</van-tabbar-item>
        <van-tabbar-item name="science" @click="getList('science')">科幻</van-tabbar-item>
        <van-tabbar-item name="terror" @click="getList('terror')">恐怖</van-tabbar-item>
        <van-tabbar-item name="comedy" @click="getList('comedy')">喜剧</van-tabbar-item>
      </van-tabbar>
      <van-tabbar v-model="tagName" :fixed="false">
        <van-tabbar-item name="documentary" @click="getList('documentary')">纪录片</van-tabbar-item>
        <van-tabbar-item name="anime" @click="getList('anime')">动漫</van-tabbar-item>
        <van-tabbar-item name="mv" @click="getList('mv')">MV</van-tabbar-item>
        <van-tabbar-item name="other" @click="getList('other')">其他</van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="tagList">
      <h4>列表</h4>
      <div class="listBar">
        <template v-for="(item, index) in list">
          <van-cell
            :key="item.filename" 
            :title="item.filename" 
            :label="item|formatOutput" 
            @click="goto(['Video', {type: tagName, filename: item.filename}])"
            v-if="index == ((page-1)*5 + index%5)"
          ></van-cell>
        </template>
      </div>
      <van-pagination
        v-model="page" 
        :total-items="totals" 
        :items-per-page="5" 
        v-if="totals>=5"
        @change="changePage"
      ></van-pagination>
    </div>
    <!-- <Footer></Footer> -->
  </div>
</template>

<script>
  import {
    NavBar,
    // Toast,
    Tabbar, 
    TabbarItem,
    Pagination,
    Cell
  } from 'vant';
  import Footer from '@/components/Footer';
  import axios from "axios";
  export default {
    name: 'Home',
    components: {
      NavBar,
      "van-tabbar": Tabbar, 
      "van-tabbar-item": TabbarItem,
      "van-pagination": Pagination,
      "van-cell": Cell,
      Footer
    },
    data() {
      return {
        tagName: window.sessionStorage.getItem('tagName') || 'action',
        page: window.sessionStorage.getItem('page') || 1,
        totals: 0,
        list: [],
        loading: false,
        password: '123456',
        apisUrl: `http://${window.location.hostname}:3000/apis`
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickRight() {
        // Toast('按钮');
      },
      getList(tagName) {
        if (window.sessionStorage.getItem('tagName') != tagName) {
          this.page = 1;
          window.sessionStorage.setItem('page', 1);
        }
        window.sessionStorage.setItem('tagName', tagName);
        let params = {
          type: tagName
        }
        this.$loading(true, "hand");
        axios.get(`${this.apisUrl}/fileList`, {params}).then(res => {
          if (res.status == 200) {
            this.$loading(false, "hand");
            let list = res.data;
            this.list = list;
            this.totals = list.length;
          }
        });
      },
      changePage() {
        window.sessionStorage.setItem('page', this.page);
      }
    },
    mounted() {
      this.getList(this.tagName);
    },
    filters: {
      formatOutput (video) {
        return `${video.birthtime} / ${video.cType} / ${(+video.filesize/1000/1000).toFixed(2)} Mb`
      }
    }
  }
</script>
